var eLineAreaChart = echarts.init(document.getElementById('e-line-area-chart'));
var dataLen = 12;
var option = {
    color: ['rgb(47,112,250)', 'rgb(224,118,25)'],
    textStyle: {
        color: 'rgb(145,145,145)'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        show: false,
        // left: '80%',
        // right: 0,
        // top: '30%',
        orient: 'horizontal',
        data: ['观日路', '望海路'],
        textStyle: {
            color: 'rgb(145,145,145)',
            fontSize: 12
        }
    },
    grid: {
        left: '3%',
        right: '3%',
        bottom: 0,
        top: '20%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: function () {
            var res = [];
            for (var i = 1; i <= dataLen; i++) {
                res.push(i);
            }
            return res;
        }(),
        axisLine: { show: false },
        splitLine: { show: false },
        axisLabel: {}
    }],
    yAxis: [{
        type: 'value',
        axisLine: { show: false },
        splitLine: { show: false },
        axisLabel: {}
    }],
    series: [{
        name: '观日路',
        type: 'line',
        smooth: true,
        areaStyle: {
            normal: {
                color: 'rgba(27,85,245,0.40)'
            }
        },
        data: [120, 132, 101, 134, 90, 230, 210, 399, 499, 599, 90, 230]
    }, {
        name: '望海路',
        type: 'line',
        smooth: true,
        areaStyle: {
            normal: {
                color: 'rgba(252,209,134,0.40)'
            }
        },
        data: [220, 182, 191, 234, 290, 330, 310, 200, 540, 100, 90, 230]
    }]
};
var appendData = function appendData() {
    var grl = option.series[0].data,
        whl = option.series[1].data,
        xAxisData = option.xAxis[0].data;
    grl.shift();
    grl.push(Math.floor(Math.random() * 600));
    whl.shift();
    whl.push(Math.floor(Math.random() * 600));

    // xAxisData.shift();
    // xAxisData.push(++dataLen);
    eLineAreaChart.setOption(option);
};
setInterval(function () {
    appendData();
}, 2200);
var dataAxis = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149];
var yMax = 500;
var dataShadow = [];

for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}

var option2 = {
    title: {
        // text: '特性示例：渐变色 阴影 点击缩放',
        // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
    },
    xAxis: {
        data: dataAxis,
        axisLabel: {
            inside: false,
            textStyle: {
                color: '#999'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: { show: false },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                normal: {color: 'rgba(0,0,0,0.05)'}
            },
            barGap:'-100%',
            barCategoryGap:'40%',
            data: dataShadow,
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: data
        }
    ]
};
var eBarAreaChart = echarts.init(document.getElementById('e-bar-area-chart'));
setInterval(function () {
    var obj = option2.series[1].data
    obj.shift();
    obj.push(Math.floor(Math.random() * 500));
    eBarAreaChart.setOption(option2);
}, 2200);
// var option3 = {
//     angleAxis: {
//     },
//     radiusAxis: {
//         type: 'category',
//         data: ['周一', '周二', '周三', '周四'],
//         z: 10
//     },
//     polar: {
//     },
//     series: [{
//         type: 'bar',
//         data: [1, 2, 3, 4],
//         coordinateSystem: 'polar',
//         name: 'A',
//         stack: 'a'
//     }, {
//         type: 'bar',
//         data: [2, 4, 6, 8],
//         coordinateSystem: 'polar',
//         name: 'B',
//         stack: 'a'
//     }, {
//         type: 'bar',
//         data: [1, 2, 3, 4],
//         coordinateSystem: 'polar',
//         name: 'C',
//         stack: 'a'
//     }],
//     legend: {
//         show: true,
//         data: ['A', 'B', 'C']
//     }
// };
// var eBarChart = echarts.init(document.getElementById('e-bar-chart'));
// eBarChart.setOption(option3);
